<template>
	<view class="store-box">
		<view class="t-box">
			<view class="item" v-for="(item,index) in titArr" :key="index">{{item}}</view>
		</view>
		<view class="s-list-box">
			<view class="l-item" v-for="(item,index) in storeList" :key="index" :class="index == 0 ? 'b-bold':'over'" @click="clickItem(item,index)">
				<view class="l-i" :class="{'l-i-s' : curIdx == index}">{{item.store_name}}</view>
				<view class="l-i" :class="{'l-i-s' : curIdx == index}">{{item.qty_min}}</view>
				<view class="l-i" :class="{'l-i-s' : curIdx == index}">{{item.amount}}</view>
				<view class="l-i-arrow" v-show="index != 0" :class="{'l-i-s' : curIdx == index}">{{item.number}}<text class="icon-font arrow-xiala-font" >&#xe600;</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import lang from "@/js/conf/Lang.js";
	export default
	{
		props:["storeList"],
		data(){
			return{
				titArr:[
					lang.report.storeTxt,
					lang.saleReport.numberTxt,
					lang.jeTxt,
				],
				curIdx:1,
			}
		},
		
		mounted()
		{
			// this.initData();
		},
		
		methods:{
			clickItem(item,index)
			{
				if(item.store_id == 0)return;
				if(this.curIdx == index)return;
				this.curIdx = index;
				this.$emit("clickStore",item.store_id);
			}
		},
		
	}
</script>

<style lang="scss">
	.store-box
	{
		width: 343px;
		height: calc(100vh - 53px) ;
		border-right:  1px solid #DDD;
		.t-box
		{
			width: 100%;
			background-color: #EEE;
			padding:6px 0;
			display: flex;
			justify-content: space-around;
			font-size: 14px;
			color: #333;
			item
			{
				width: 33%;
				text-align: center;
			}
		}
		
		.s-list-box
		{
			font-size: 13px;
			.l-item
			{
				display: flex;
				justify-content: space-around;
				padding:6px 0;
				border-bottom: solid 1px #F9F9F9;
				position: relative;
				
				.l-i
				{
					width: 33%;
					text-align: center;
				}
				.l-i-arrow
				{
					position: absolute;
					right: 4px;
				}
				.l-i-s
				{
					color: #3388ff;
				}
			}
			.over
			{
				cursor: pointer;
			}
			.over:hover
			{
				background-color: #EEE;
			}
			.b-bold
			{
				font-weight: bold;
			}
		}
		
		
	}
</style>